<template>
	<view>
		<view-head :Title="title" :isShowR="true" @saveBack="saveBack"></view-head>
		<view class="list">
			<view class="item _df _jb _ac">
				<view class="title">
					提醒时间
				</view>
				<view class="info" @click="pikerShow = true">
					{{params.remindTime}}<u-icon class="ml20" name="arrow-right" color="#888" size="26"></u-icon>
				</view>
			</view>
			<view class="item _df _jb _ac">
				<view class="title">
					提醒类型
				</view>
				<view class="info" @click="actionShow = true">
					{{params.repeatTitle}}<u-icon class="ml20" name="arrow-right" color="#888" size="26"></u-icon>
				</view>
			</view>
			<view class="item _df _jb _ac">
				<view class="title">
					重复
				</view>
				<view class="info" @click="popShow = true">
					{{params.repeatType}}<u-icon class="ml20" name="arrow-right" color="#888" size="26"></u-icon>
				</view>
			</view>
		</view>
		<u-picker v-model="pikerShow" confirm-color="#FF4651" :params="pikerParams" @confirm="dateChange" mode="time"></u-picker>
		<u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet>
		<u-popup v-model="popShow" mode="bottom" :closeable="true" @close="onclose">
			<view class="popCon">
				<view class="yjtitle">
					重复
				</view>
				<view class="list2">
					
					<view @click="check(index)" class="item _df _ac _jb" hover-class="hover" v-for="(item,index) in dayList" :key="index">
						<view class="title">
							{{item.title}}
						</view>
						<view class="img" v-if="item.isCheck">
							<image src="@/static/img/index/gou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="">
					<u-button style="width: 100%;" type="primary" @click="checkFn">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'新增提醒',
				params:{
					id:null,
					remindTime:'',
					remindType:1,
					repeatTitle:'请选择',
					repeatType:'',
					remindTimeList:[],
					status:1
				},
				day:'',
				type:'请选择',
				actionList:[
					{
						text:'正念提醒',
						type:1,
					},
					{
						text:'冥想提醒',
						type:2,
					},
					{
						text:'呼吸提醒',
						type:3,
					},
				],
				actionShow:false,
				pikerShow:false,
				popShow:false,
				pikerParams: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				dayList:[
					
					{
						title:'周一',
						isCheck:false
					},
					{
						title:'周二',
						isCheck:false
					},
					{
						title:'周三',
						isCheck:false
					},
					{
						title:'周四',
						isCheck:false
					},
					{
						title:'周五',
						isCheck:false
					},
					{
						title:'周六',
						isCheck:false
					},
					{
						title:'周日',
						isCheck:false
					},
				]
			};
		},
		onLoad(options) {
			if(options.data){
				let _data = JSON.parse(options.data)
				this.params = {
					id:_data.id,
					remindTime:_data.remindTime,
					remindType:_data.remindType,
					repeatTitle:_data.repeatTitle,
					repeatType:_data.repeatType,
					remindTimeList:_data.remindTimeList,
					status:_data.status
				}
				console.log(this.params.remindTimeList)
				this.dayList.forEach((item,index) => {
					_data.remindTimeList.forEach(item2 => {
						if(item.title == item2){
							item.isCheck = true
						}
					})
				})
				this.title = '编辑提醒'
			}else{
				this.title = '新增提醒'
			}
		},
		onShow() {
			
		},
		methods:{
			actionClick(index){
				this.params.remindType = this.actionList[index].type
				this.params.repeatTitle = this.actionList[index].text
			},
			saveBack(){
				this.doAdd()
			},
			doAdd(){
				let that = this
				uni.$_post({
					url: "appUserRemind-add",
					that: that,
					params: that.params,
					needlogin: false,
					success(res) {
						if(res.code == 0){
							let title = that.params.id!=null?'修改成功':'添加成功'
							uni.showToast({
								title: title,
								duration: 1000,
								icon:'success'
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 1200);
						}
					},
					fail(err) {
							
					},
				});
				
				
			},
			dateChange(e){
				this.params.remindTime = e.hour+':' +e.minute
			},
			check(e){
				this.dayList.map((item,index) =>{
					if(e == index){
						item.isCheck = !item.isCheck
					}
				})
			},
			checkFn(){
				this.onclose()
			},
			onclose(){
				let str = ''
				let arr =[]
				let newArr = []
				this.dayList.map((item,index) =>{
					if(item.isCheck){
						newArr.push(item.title)
						let title = item.title +'、'
						arr.push(title)
					}
				})
				this.params.remindTimeList = newArr
				str = arr.join('')
				if(arr.length==7){
					this.params.repeatType = '每天'
				}else if(arr.length==5 && !arr.includes('周六') && !arr.includes('周日')){
					this.params.repeatType = '工作日'
				}else{
					this.params.repeatType = str.slice(0, -1);
				}
				this.popShow = false
			}
		},
	}
</script>

<style lang="scss" scoped>
.list{
	padding: 30rpx;
	.item{
		height: 100rpx;
		margin-bottom: 30rpx;
		.info{
			font-size: 28rpx;
			color: #aaa;
		}
		.title{
			font-size: 34rpx;
			color: #000;
			font-family: $uni-font-family-Bold;
		}
	}
}
.popCon{
	padding: 50rpx 30rpx 0;
	box-sizing: border-box;
	height: 70vh;
	.yjtitle{
		font-size: 32rpx;
		color: #000;
		font-family: $uni-font-family-Bold;
		text-align: center;
		margin-bottom: 60rpx;
	}
	.list2{
		border-radius: 24rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
		margin-bottom: 50rpx;
		.item{
			height: 80rpx;
			border-bottom: 1rpx solid #eee;
			padding: 0 20rpx;
			.title{
				font-size: 30rpx;
				color: #000;
				font-family: $uni-font-family-Bold;
			}
			.img{
				image{
					width: 37rpx;
					height: 27rpx;
				}
			}
		}
	}
}
</style>
